<template>
    <div class="layui-col-md24">
    <div class="clearfix" >

        <div class="layui-col-lg8 layui-col-sm8" v-for="(item,index) in data.data" :key='index'>
            <div class="production-box">
                <div class="production-cover">
                    <a :href="item.keyword" target="_blank">
                        <lay-icon :type="item.pic" size="60px" :color="SetColor(item.titlecolor)"></lay-icon>
                        <!-- <i :class="'fa '+item.pic+' fa-5x'" v-bind:style="{color:}" :alt="item.title"></i> -->
                    </a>
                </div>
                <h1 class="production-title"><a :href="item.keyword" target="_blank">{{item.title}}</a></h1>
                <p class="production-abstract">{{item.description==null?"暂无描述信息":item.description}}</p>
                <div class="production-footer">
                    <a class="layui-btn layui-btn-sm layui-btn-primary" :href="item.keyword" target="_blank"><i class="fa fa-eye fa-fw"></i>查看</a>
                    <!--<a class="layui-btn layui-btn-sm layui-btn-primary" target="_blank"><i class="fa fa-download fa-fw"></i>下载</a>-->
                </div>
            </div>
        </div>

    </div>
</div>
</template>
<script lang="ts">
export default {
    name:'product'

}
</script>
<script lang="ts" setup>
import { ref, reactive,withDefaults,defineProps } from "vue";
interface IproductProps {
  data: any
}
const props = withDefaults(defineProps<IproductProps>(), {
  data:Object
});


const data=ref(null) as any;
const model=ref(null) as any;

    data.value=props.data;

console.log(data.value);

const SetColor=(_this:any)=>{
       if (_this === null || _this === undefined) {
                    return "#009688";
                } else return _this;
}

</script>
<style scoped>
  .production-box {
            max-width: 90%;
            background-color: #fff;
            -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.18);
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.18);
            box-shadow: 0 1px 3px rgba(0,0,0,0.18);
        }

        .production-cover {
       
                text-align: center;
            padding: 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom: 1px solid #e2e2e2;
        }

            .production-cover img {
                max-width: 90%;
                /*width: 100%;*/
            }

        .production-title {
            height: 60px;
           
            text-align: center;
            font-size: 16px;
            text-shadow: 0px 0px 4px #00ffff,0px 0px 4px #0094ff,0px 0px 4px #0026ff;
            color: #fcfbfb
        }

        .production-intro {
            background-color: #000;
        }

            .production-intro p {
                margin-top: 46%;
                text-align: center;
                font-size: 16px;
                padding: 0 20px;
            }

            .production-intro a {
                color: #fff;
                display: inline-block;
                padding: 10px 20px;
                -moz-box-shadow: 0px 0px 2px 2px #b6ff00;
                -webkit-box-shadow: 0px 0px 2px 2px #b6ff00;
                box-shadow: 0px 0px 2px 2px #b6ff00;
            }
            .production-abstract{
               height: 42px;
               line-height: 42px;
               padding: 0 15px;
                border-top: 1px solid #f6f6f6;
                font-size: 14px; 
                text-overflow: ellipsis ;
                white-space: nowrap;
                overflow: hidden;
                margin: 10px;
            }
            .production-footer{
                text-align: center;
                height: 40px;
                margin: 5px;
            }
</style>
